<!-- 充值首页 -->
<template>
  <view class="bigbox">
    <view class="topbox">
      <view class="bjbox"> </view>
      <view class="btbox">
        <van-tabs
          :active="activeIndex"
          @change="handleTabChange"
          color="#FD6135"
          title-inactive-color="#333"
          title-active-color="#FD6135"
        >
          <van-tab
            :title="`${wz.rechargeType}`"
            v-for="wz in btList"
            style="background-color: #fef0e2"
          ></van-tab>
        </van-tabs>
        <!-- 重新加载图标 -->
        <!-- <view style="text-align: right; margin: 20rpx; margin-bottom: 0">
          <u-icon
            color="black"
            name="reload"
            size="40"
            style="cursor: pointer"
            @click="handleProductList"
          ></u-icon>
        </view> -->
      </view>
    </view>
    <view class="footerbox">
      <template
        v-if="btList[activeIndex] && btList[activeIndex].brandList.length > 0"
      >
        <view
          v-for="ele in btList[activeIndex].brandList"
          class="xhz"
          @click="handleClickItem(ele)"
        >
          <view class="xhz-l">
            <view style="margin-bottom: 10rpx; width: 200rpx" class="overwz">
              {{ ele.brandName }}
            </view>
            <view class="jgwz"> ￥{{ ele.minPrice }}起 </view>
          </view>
          <view class="xhz-r">
            <van-image
              width="92rpx"
              height="92rpx"
              :src="ele.brandCover"
              fit="cover"
            />
          </view>
        </view>
        <u-back-top :scroll-top="scrollTop"></u-back-top>
      </template>
      <view class="notdata" v-else>
        <van-empty description="暂无内容" />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive, ref, computed, nextTick, watch } from 'vue'
import { onLoad, onReady, onPageScroll } from '@dcloudio/uni-app'
import { enumAll, directApi } from '@/api'
import { useMovieStore, useShopInfoStore } from '@/store/index'
const shopStore = useShopInfoStore()
const activeIndex = ref(0)
const scrollTop = ref(0)
const btList = ref<any>([])

onLoad((option: any) => {
  uni.showLoading()
  console.log('充值首页option', option)
  if (option?.from && option.from.toLowerCase() === 'app') {
    shopStore.setIsApp(true)
  } else {
    shopStore.setIsApp(false)
  }

  handleGetBtList()
})

// 获取分类数据
const handleGetBtList = async () => {
  try {
    const parama = {
      shopMode:uni.getStorageSync('hyType') ? JSON.parse(uni.getStorageSync('hyType')).id : 4
    }
    const { data } = await directApi.getAllCategoryApi(parama).finally(() => {
      uni.hideLoading()
    })
    btList.value = data
    console.log(data, '所有分类数据')
  } catch (error) {
    console.log('获取分类error', error)
  }
}
// 切换tab
const handleTabChange = (index: any) => {
  activeIndex.value = index
  handleGetBtList()
}
//返回顶部,所在的父盒子不能设置高度
onPageScroll((e: any) => {
  scrollTop.value = e.scrollTop
})
// 点击每一个产品
const handleClickItem = (product: any) => {
  uni.navigateTo({
    url: `/pages/recharge/rechargeBuy?product=${JSON.stringify(product)}`
  })
}
</script>
<style lang="scss" scoped>
.bigbox {
  background-color: #fff;
  min-height: 100vh;
  .topbox {
    .bjbox {
      width: 750rpx;
      height: 250rpx;
      background-image: url(./static/sybj.png);
      background-size: cover;
      background-position: 100%;
      background-repeat: no-repeat;
    }
  }
  .footerbox {
    padding: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .xhz {
      display: flex;
      align-items: center;
      justify-content: space-around;
      background-color: #f7f7f7;
      border-radius: 16rpx;
      width: 340rpx;
      height: 160rpx;
      padding: 28rpx 30rpx 28rpx 24rpx;
      margin-bottom: 16rpx;
      font-size: 28rpx;
    }
    .notdata {
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
}
.overwz {
  //   单行文本省略号
  width: 100%;
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 用省略号表示被截断的文本 */
}
.hswz {
  color: #333;
  font-size: 24rpx;
}
.jgwz {
  color: #333;
}
::v-deep .van-tab {
  background-color: #fef0e2;
}
</style>
